<template>
  <div class="h100 login">
    <div class="warper">
      <!-- rules 验证规则-->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="user_name">
          <el-input v-model="ruleForm.user_name"></el-input>
        </el-form-item>

        <el-form-item prop="user_pwd">
          <el-input
            v-model.number="ruleForm.user_pwd"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="w100" type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>

         <!-- <el-form-item>
          <el-button class="w100" type="primary" @click="goHome"
            >Home</el-button
          >
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "../request"
/* import Home from './HomeView.vue' */
import { mapState,mapMutations } from 'vuex'
import { filteRoutes } from '../utils'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度需要大于六位"));
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("用户名长度需要大于六位"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        user_name: "",
        user_pwd: "",
      },
      rules: {
        user_name: [{ validator: validateName, trigger: "blur" }],
        user_pwd: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState(["routes"])
  },
  methods: {
    ...mapMutations(["CHNAGE_CHILD"]),
    // goHome() {
    //     this.$router.push("/home")
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // axios.post("/user/login", {
          //     user_name: this.ruleForm.userName,
          //     user_pwd: this.ruleForm.passWord
          // }).then(res => {
          //     console.log(res)
          // })

          //   1. 登录  存储token
          //   2. 获取用户信息

          axios.post("/user/login", this.ruleForm).then((res) => {
            // 存储token
            sessionStorage.setItem("token", res.data.token);

            // 获取当前用户信息
            axios.get("/user/userInfo").then((res) => {
                // addRoutes  动态添加路由
                // res.data.identity_text

                this.CHNAGE_CHILD({
                    list: filteRoutes(res.data.data.identity_text)
                })
                
                this.$router.addRoutes(this.routes)
                //  管理员   出题者   浏览者  
                this.$router.push('/home')
            });
          });

          // /user/login
          // http://localhost:7001/user/login

          // 登录
          console.log(this.ruleForm);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  background: #000080;
}

.warper {
  width: 400px;
  padding: 40px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  right: 15%;
  top: 25%;
  box-sizing: border-box;
}
</style>